<template>
  <el-card class="box-card">
    <el-row class="mb-4">
      <el-col :span="24">
        <el-form-item label="类型别名:">
          <el-input v-model="form.name" class="type" placeholder="搜索类型别名" />
          <el-button type="primary" @click="onSubmit" size="large" color="#626aef">重置</el-button>
          <el-button size="large">查询</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col><el-button type="primary" :icon="Plus" color="#626aef">添加公告分类</el-button></el-col>
    </el-row>
    <el-row class="row-table">
      <el-col>
        <el-table :data="tableData" style="width: 100%" stripe>
          <el-table-column type="index" label="ID" width="50" />
          <el-table-column prop="id" label="排序" width="180" />
          <el-table-column prop="name" label="分类名称" width="180" />
          <el-table-column prop="parentID" label="父级ID" />
          <el-table-column label="状态">
            <template #default="scope">


              <el-tag class="ml-2" :type="scope.row.parentID ? 'warning' : ''">Tag 4</el-tag>

            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-link type="primary" v-for="(item, index) in scope.row.children" :key="index">
                <span style="margin:0 5px 0 ;color:#ccc" v-if="index == 0 ? false : true">|</span>
                {{ item }}
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row class="elrows">
      <div class="demo-pagination-block">

        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
          layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
const form = reactive({
  name: "",
});
const onSubmit = () => {
  console.log("submit!");
};
const tableData = [
  {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  }, {
    id: "1",
    name: "Tom",
    parentID: "0",
    children: [
      '添加分类', "编辑", '删除'
    ]
  },
];

const currentPage4 = ref(4)

const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped lang="scss">
.mb-4 {
  width: 100%;
  height: 100%;
}

.box-card {
  width: 96%;
  height: 96%;
  margin: auto;
}

.type {
  width: 200px;
  height: 40px;
  margin-right: 20px;
}

.elrows {
  margin: 20px 0 0 0;
  justify-content: flex-end;
}

.row-table {
  height: 800px;
  overflow: hidden;
}
</style>
